<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品列表</title>
    <!-- 引入axios的JavaScript文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #000;
        color: #fff;
      }
      ul,
      li {
        list-style: none;
      }
      ul {
        width: 100%;
        height: 100px;
      }
      ul > li {
        display: flex;
        border: 2px solid #ccc;
        margin: 10px auto;
        /* justify-content: space-evenly; */
      }
      li > input {
        display: block;
        margin: 0 0 0 50px;
      }
      ul img {
        height: 100px;
        margin: 0 50px;
      }
      li > div {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: space-evenly;
      }
      li > p {
        align-self: center;
        width: 200px;
        display: flex;
      }
      li > p > button {
        width: 50px;
        height: 30px;
        font-size: 20px;
      }
      li > p > input {
        outline: none;
        display: block;
        box-sizing: border-box;

        width: 50px;
        height: 30px;
      }
      li > button:nth-of-type(1) {
        align-self: center;
        margin: 0 50px;
        width: 100px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <ul>
      <!-- <li>
        <input type="checkbox" />
        <img src="" />
        <p></p>
        <p></p>
        <p></p>
      </li> -->
    </ul>
  </body>
  <script>
    // 创建实例时配置默认地址
    // const http = axios.create({
    //   baseURL: "http://localhost:8888",
    // });
    function loadList() {
      let HTML = "";
      axios
        .get("http://localhost:8888/goods/list")
        .then(function (response) {
          // 处理成功情况
          // console.log(response);
          // console.log(response.data);
          response.data.list.forEach((v) => {
            HTML += `
                    <li>
                      <img src="${v.img_big_logo}" onclick="RunFn(${v.goods_id})"/>
                      <div>
                        <p>标题：${v.title}</p>
                        <p>价格：${v.price}</p>
                        <p>库存：${v.goods_number}</p>
                      </div>
                      <p><button onclick="diffFn(${v.goods_id})">-</button><input onchange="changeFn(${v.goods_id})" type="number" /><button>+</button></p>
                      <button onclick="CartFn(${v.goods_id})">加入购物车</button>
                    </li>
                    `;
          });
          document.querySelector("ul").innerHTML = HTML;
        })
        .catch(function (h) {
          // 处理错误情况
          console.log(h.status);
        });
    }
    loadList();
    function RunFn(id, e) {
      // e.stopPropagation();
      location.href = "http://127.0.0.1:5500/course2/day11/todo_detial.html";
      sessionStorage.setItem("ID", id);
    }
    function changeFn(id) {}
    function CartFn(id) {}
    function Fn() {}
  </script>
</html>
